<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>
</body>
<script>
    // 创建构造函数
    function Table(control_seletor,content_seletor){
        //获取标签
        this.btns = document.querySelectorAll(control_seletor);
        this.cont = document.querySelectorAll(content_seletor);
        this.index = 0;
        this.bindEvent();
        this.changeTable();

    }
    Table.prototype.bindEvent = function(){
        var self = this;
        for(var i=0;i<self.btns.length;i++){
            self.btns[i].index = i;
            self.btns[i].onclick = function(){
                self.index = this.index;
                self.changeTable();
            }

        }
    }
    Table.prototype.changeTable = function(){
        var self = this;
        for(var i=0;i<self.cont.length;i++){
            self.cont[i].style.display = 'none'
        }
        self.cont[self.index].style.display = 'block'
    }
    var tab = new Table('.control button','.box');
</script>
</html>